<template>
  <el-row :gutter="20">
    <el-col :span="6" :xs="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>个人中心</span>
          </div>
        </template>
        <UserAvatar></UserAvatar>
        <ul class="list mt-2">
          <li class="list-group-item flex justify-between align-center">
            <span> <iconFont iconName="user-fill"></iconFont>用户名称 </span>
            <span>{{ baseInfoData.userName }}</span>
          </li>
          <li class="list-group-item flex justify-between align-center">
            <span><iconFont iconName="shouji"></iconFont>手机号码</span>
            <span>{{ baseInfoData.mobile }}</span>
          </li>
          <li class="list-group-item flex justify-between align-center">
            <span><iconFont iconName="youxiang"></iconFont>用户邮箱</span>
            <span>{{ baseInfoData.mail }}</span>
          </li>
          <li class="list-group-item flex justify-between align-center">
            <span><iconFont iconName="jiaose"></iconFont>所属角色</span>
            <span>{{ baseInfoData.roles }}</span>
          </li>
          <li class="list-group-item flex justify-between align-center">
            <span><iconFont iconName="riqi"></iconFont>创建日期</span>
            <span>{{ baseInfoData.createTime }}</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="18" :xs="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本资料</span>
          </div>
        </template>
        <el-tabs v-model="baseInfoData.activeName">
          <el-tab-pane label="基本资料" name="baseInfo">
            <BaseInfo :baseInfo="baseInfoData"></BaseInfo>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="updatePassword">
            <UpdataPassword></UpdataPassword>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { reactive } from 'vue';
import UserAvatar from '@/components/UserAvatar';
import BaseInfo from './components/BaseInfo';
import UpdataPassword from './components/UpdataPassword';
export default {
	components : {
		UserAvatar,
		BaseInfo,
		UpdataPassword
	},
	setup () {
		let baseInfoData = reactive({
			activeName : 'baseInfo',
			userName : '阿三',
			mobile : '17623453455',
			mail : 'hulei@163.com',
			roles : '超级管理员',
			createTime : '2020-12-12 12:12:12'
		});
		return {
			baseInfoData
		};
	}
};
</script>

<style lang="scss" scoped>
.list {
  font-size: 13px;
}
.list-group-item {
  height: 40px;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
  margin-top: -1px;
}
</style>
